<template>
  <div>
    <el-input
      v-model="input"
      placeholder="请输入查询参数"
      class="searchInput"
    ></el-input>
    <el-button
      icon="el-icon-search"
      style="font-size: 16px;"
      @click="handleSearch"
    ></el-button>
    <el-button
      class="delButton"
      v-if="multipleSelectionFlag"
      @click="batchRemove"
      icon="el-icon-delete"
    >
    </el-button>
    <el-table
      ref="memberTable"
      :data="member"
      :stripe="true"
      :highlight-current-row="true"
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
      class="table"
    >
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column
        label="id"
        width="50"
      >
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column
        prop="levelId"
        label="等级id"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话号码"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="140"
      >
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.gender==1">男</el-tag>
          <el-tag
            type="danger"
            v-if="scope.row.gender==0"
          >女</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="birth"
        label="生日"
        width="140"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.birth | birth }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="city"
        label="所在城市"
        width="140"
      >
      </el-table-column>
      <el-table-column
        prop="integration"
        label="积分"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="growth"
        label="成长值"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="启用状态"
        width="80"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag
            type="info"
            v-if="scope.row.status==0"
          >禁用</el-tag>
          <el-tag
            type="success"
            v-if="scope.row.status==1"
          >启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime | createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          ><i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 40, 80]"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      input: '',
      multipleSelectionFlag: false,
      multipleSelection: [],
      member: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSearch () {
      this.getPageMember(this.pageSize, this.currentPage, this.input)
    },
    handleDelete (index, row) {
      let ids = [row.id]
      let name = row.username
      this.remove(ids, name)
    },
    batchRemove () {
      let ids = []
      let name = []
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
        name.push(item.username)
      })
      this.remove(ids, name)
    },
    remove (ids, name) {
      this.$confirm(`删除【${name}】会员, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/member/member/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then((data) => {
          if (data.data.code === 500) {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          } else {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          this.getPageMember(this.pageSize, this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.multipleSelectionFlag = true
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
        this.multipleSelectionFlag = false
      }
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getPageMember(this.pageSize, this.currentPage, this.input)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getPageMember(this.pageSize, this.currentPage, this.input)
    },
    getPageMember (size, page, input) {
      this.$http({
        url: this.$http.adornUrl('/member/member/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: page,
          limit: size,
          input: input
        })
      }).then(({
        data
      }) => {
        this.total = data.data.totalCount
        this.member = data.data.list
      })
    }
  },
  filters: { // 格式化时间
    birth (time) {
      if (time === undefined) {
        return ''
      }
      return moment(time).format('YYYY-MM-DD')
    },
    createTime (time) {
      if (time === undefined) {
        return ''
      }
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created () {
    this.getPageMember(this.pageSize, this.currentPage)
  }
}
</script>
<style>
.searchInput {
  width: 15%;
  margin-right: 10px;
}

.addButton {
  background: #25c6a2;
  color: #fff;
  font-size: 16px;
}

.delButton {
  background: #f4b1b6;
  color: #fff;
  font-size: 16px;
}

.table {
  width: 100%;
  margin-top: 15px;
}
</style>